<template>
    <div style="width: 100%;height: 100vh;">
      <dv-loading v-if="loading">
        <div color-white>Loading...</div>
      </dv-loading>
      <div class="header"><HeaderItem /></div>
      <div class="main">
        <div class="left">
          <div class="lcrtitem">
            <ItemBorder title="商机分析"><LeftItem1 /></ItemBorder>
          </div>
          <div class="lcrtitem">
            <ItemBorder title="客户分析"><LeftItem2 /></ItemBorder>
          </div>
          <div class="lcrtitem">
            <ItemBorder title="新增客户"><LeftItem3 /></ItemBorder>
          </div>
        </div>
        <div class="center">
          <div class="lcrtitem"><CenterItem1 /></div>
          <div class="lcrtitem"><CenterItem2 /></div>
          <div class="lcrtitem2">
            <div class="centeritem"><CenterItem3 /></div>
            <div class="centeritem"><CenterItem4 /></div>
          </div>
        </div>
        <div class="right">
          <div class="lcrtitem">
            <ItemBorder title="隐患统计"><RightItem1 /></ItemBorder>
          </div>
          <div class="lcrtitem">
            <ItemBorder title="隐患分析"><RightItem2 /></ItemBorder>
          </div>
          <div class="lcrtitem">
            <ItemBorder title="隐患排查奖励"><RightItem3 /></ItemBorder>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import HeaderItem from '@views/mes/market/headeritem.vue'
  import ItemBorder from '@comp/ItemBorder/index.vue'
  import CenterItem1 from '@views/website/centeritem1.vue'
  import CenterItem2 from '@views/website/centeritem2.vue'
  import CenterItem3 from '@views/website/centeritem3.vue'
  import CenterItem4 from '@views/website/centeritem4.vue'
  import CenterItem5 from '@views/website/centeritem5.vue'
  import CenterItem6 from '@views/website/centeritem6.vue'
  import LeftItem1 from '@views/mes/market/leftitem1.vue'
  import LeftItem2 from '@views/mes/market/leftitem2.vue'
  import LeftItem3 from '@views/mes/market/leftitem3.vue'
  import LeftItem4 from '@views/website/leftitem4.vue'
  import RightItem1 from '@views/website/rightitem1.vue'
  import RightItem2 from '@views/website/rightitem2.vue'
  import RightItem3 from '@views/website/rightitem3.vue'
  import RightItem4 from '@views/website/rightitem4.vue'
  export default {
    name: 'WebSite',
    components: {
      ItemBorder,
      HeaderItem,
      CenterItem1,
      CenterItem2,
      CenterItem3,
      CenterItem4,
      CenterItem5,
      CenterItem6,
      LeftItem1,
      LeftItem2,
      LeftItem3,
      LeftItem4,
      RightItem1,
      RightItem2,
      RightItem3,
      RightItem4
    },
    data() {
      return {
        loading: false
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .header {
    width: 100%;
    height: 80px;
  }
  
  .main {
    display: flex;
    height: 100%;
    .left {
      width: 25%;
      display: flex;
      flex-direction: column;
    }
  
    .center {
      width: 50%;
    }
  
    .centeritem {
      width: 50%;
      height: 100%;
    }
  
    .right {
      width: 25%;
    }
    .lcrtitem {
      padding: 0 2px 5px;
      height: calc(33% - 30px);
      overflow: hidden;
    }
    .lcrtitem2 {
      padding: 0 2px 5px;
      height: calc(25% - 30px);
      display: flex;
      overflow: hidden;
    }
  }
  </style>
  